import React, {useContext} from 'react';
import BackDrop from "../../UI/BackDrop/BackDrop";

import classes from "./CartDetail.module.css"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faTrashCan} from "@fortawesome/free-regular-svg-icons";
import TestComponents from "../../../store/testContext";
import Meal from "../../Meals/Meal/Meal";
import Confirm from "../../UI/Confrim/Confrim"


const CartDetail = (props) => {
    const ctx = useContext(TestComponents)
    const [showConfirm, setShowConfirm] = React.useState(false);
    const showConfirmHandler = () => {
        setShowConfirm(true);
    }
    const cancelHandler = (e) => {
        setShowConfirm(false);
        e.stopPropagation();
    }
    const sureHandler = ()=>{
        ctx.ClearCartHandler()
        props.onClick()
    }
    return (
        <BackDrop>
            {showConfirm && <Confirm onCancel={cancelHandler} onClick={sureHandler}></Confirm>}
            <div className={classes.CheckoutPage}
                 onClick={e => {
                     e.stopPropagation()
                 }}>
                <header className={classes.Header}>
                    <h2 className={classes.title}>餐品详情</h2>
                    <div className={classes.clear}
                         onClick={showConfirmHandler}>
                        <FontAwesomeIcon className={classes.trash} icon={faTrashCan}/>
                        <div className={classes.clearCar}>清空购物车</div>
                    </div>
                </header>
                <div className={classes.CheckoutContent}>
                    {ctx.cartData.item.map(item => <Meal isShow data={item} key={item.id}></Meal>)}
                </div>
            </div>
        </BackDrop>
    );
};

export default CartDetail;